<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="description">
	<meta content="" name="keywords">
	<meta content="Steper Kuo" name="author">
	<title>Tab switch animation</title>

	<!-- Favicons -->
	<link href="./assets/img/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
	<link href="./assets/img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">

	<link href="index.css" rel="stylesheet" type="text/css"/>
	<!-- Style custom *** CSS -->
	<style id="demoCSS" type="text/css">
		/* Demo's CSS here */

	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div class="large-12 columns" id="demoWrap">
				<h3 id="overview">Overview</h3>
				<div id="demoHTML">
					<!--Demo's html here-->
					<section class="tab-container">
						<nav class="tab-nav">
							<div class="tab-item tab1 active">
								<div class="block">tab1</div>
							</div>
							<div class="tab-item tab2">
								<div class="block">tab2</div>
							</div>
							<div class="indicator"></div>
						</nav>
						<main class="tab-reel-container">
							<div class="tab-reel">
								<div class="tab-panel" id="tabPanel1">
									<div class="card card_large">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
									<div class="card card_list">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
									<div class="card card_list">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
									<div class="card card_list">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
								</div>
								<div class="tab-panel" id="tabPanel2">
									<div class="card card_list">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
									<div class="card card_list">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
									<div class="card card_list">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
									<div class="card card_large">
										<figure></figure>
										<div class="desc">
											<div class="block"></div>
											<div class="block"></div>
										</div>
									</div>
								</div>
							</div>
						</main>
					</section>


					<!--Introduction here-->
					<p>
						From code pen: <a href="https://codepen.io/Gelsot/pen/eMOvOP" rel="nofollow" target="_blank">https://codepen.io/Gelsot/pen/eMOvOP</a>
					</p>
				</div>
			</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<script src="index.js" type="text/javascript"/>

<!-- Script Demo *** JS -->
<script id="demoJS" type="text/javascript">
	// Demo's JS here

</script>

</body>
</html>